<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>只响应自身相关事件</title>
    <style>
        .box1 {
            width: 600px;
            height: 600px;
            background-color: red;
        }

        .box2 {
            width: 400px;
            height: 400px;
            background-color: chocolate;
        }

        .box3 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

    </style>
</head>
<body>
<div id="change" class="change">
    <div class="box1" @click="box1Clicked">
        <div class="box2" @click.stop.self="box2Clicked">
            <div class="box3" @click="box3Clicked">
            </div>
        </div>
    </div>
</div>

<script>
    function box1Clicked() {
        console.log("box1 clicked");
    }

    function box2Clicked() {
        console.log("box2 clicked");
    }

    function box3Clicked() {
        console.log("box3 clicked");
    }


    function event_handling(element) {
        // 获取该元素所有的属性
        let attributeNames = element.getAttributeNames();

        for (let i = 0; i < attributeNames.length; i++) {
            if ((attributeNames[i].indexOf("data-on:") === 0) || (attributeNames[i].indexOf("@") === 0)) {

                let start = null;

                if (attributeNames[i].indexOf("data-on:") === 0) {
                    start = attributeNames[i].indexOf(":");
                } else {
                    start = attributeNames[i].indexOf("@");
                }

                let end = attributeNames[i].indexOf(".");

                let event_name = null

                let modifier = null
                if (end === -1) {
                    event_name = attributeNames[i].substring(start + 1);
                } else {
                    event_name = attributeNames[i].substring(start + 1, end);
                    modifier = attributeNames[i].substring(end + 1);
                }

                let event_func = element.getAttribute(attributeNames[i]);
                console.log(event_func);
                console.log(event_name);
                console.log(modifier);

                element.addEventListener(event_name, function (event) {

                    if (modifier !== null) {
                        let split = modifier.split('.');


                        for (let j = 0; j < split.length; j++) {
                            switch (split[j]) {
                                case 'stop':
                                    event.stopPropagation()

                                    break
                                case 'prevent':
                                    event.preventDefault()

                                    break

                                case 'self':
                                    if (event.target === element){
                                        break
                                    }
                                    else {
                                        return
                                    }

                                default:
                                    break

                            }
                        }
                        eval(event_func + "()")
                    }
                    // 处理没有修饰符的情况
                    else {
                        eval(event_func + "()")
                    }
                })

                element.removeAttribute(attributeNames[i])
            }
        }
    }

    let element1 = document.querySelector("#change .box1");
    let element2 = document.querySelector("#change .box2");
    let element3 = document.querySelector("#change .box3");


    event_handling(element1)
    event_handling(element2)
    event_handling(element3)


</script>
</body>
</html>